<template>
    <div class='distriSetting'>
        <el-dialog :title="title" visible @close="close()" width="80%" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="180px" v-loading="formLoading">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="服务名称：" prop="name">
                                <span>{{ form.name }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="蔚蓝抽成比例：" prop="weilan_take_rata">
                                <span>{{ form.weilan_take_rata }}%</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="加盟商抽成比例：" prop="busin_take_rata">
                                <el-input style="width:260px;" v-model="form.busin_take_rata" @keyup.native="form.busin_take_rata=onInput(form.busin_take_rata)"
                                    placeholder="请输入">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">%</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="一级大团长抽成比例：" prop="one_tc_take_rata">
                                <el-input style="width:200px;" v-model="form.one_tc_take_rata" @keyup.native="form.one_tc_take_rata=onInput(form.one_tc_take_rata)"
                                    placeholder="请输入">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">%</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" :offset="1">
                            <el-form-item label="二级大团长抽成比例：" prop="two_tc_take_rata">
                                <el-input style="width:200px;" v-model="form.two_tc_take_rata" @keyup.native="form.two_tc_take_rata=onInput(form.two_tc_take_rata)"
                                    placeholder="请输入">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">%</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="一级团长抽成比例：" prop="one_gl_take_rata">
                                <el-input style="width:200px;" v-model="form.one_gl_take_rata" @keyup.native="form.one_gl_take_rata=onInput(form.one_gl_take_rata)"
                                    placeholder="请输入">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">%</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" :offset="1">
                            <el-form-item label="二级团长抽成比例：" prop="two_gl_take_rata">
                                <el-input style="width:200px;" v-model="form.two_gl_take_rata" @keyup.native="form.two_gl_take_rata=onInput(form.two_gl_take_rata)"
                                    placeholder="请输入">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">%</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="close()">取 消</el-button>
                    <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>
<script>
import throttle from 'lodash.throttle'
import { setServiceTake, getServiceTake } from "@/api/service/service.js"
export default {
    name: 'add',
    props: {
        title: String,
        data: {
            type: Object,
            default: function () {
                return {}
            }
        }

    },
    components: {
        
    },
    data() {
        const isRange = (rule, value, callback) => {
            if (value < 0 || value > 100) {
                return callback(new Error('输入数字需要在0~100之间'))
            } else {
                callback()
            }
        }
        return {   
            loading: false,
            formLoading: false,
            handleShow: "",
            form: {
                uid: null,
                name: null,
            },
            rules: {
                busin_take_rata: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: isRange, trigger: 'blur' }],
                one_tc_take_rata: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: isRange, trigger: 'blur' }],
                two_tc_take_rata: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: isRange, trigger: 'blur' }],
                one_gl_take_rata: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: isRange, trigger: 'blur' }],
                two_gl_take_rata: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: isRange, trigger: 'blur' }],
                // self_ability: [{ required: true, message: '请选择自理能力', trigger: 'blur' }],
            },
        }
    },
    created() {
        if (this.data) {
            console.log(this.data, "表单数据")
            this.form.name = this.data.name
            this.form.service_id = this.data.id
            getServiceTake({service_id:this.data.id}).then(res=>{
                this.form = { ...this.form, ...res.data }
            })
        }

    },
    methods: {

        close() {
            this.form = {};
            this.$emit('close');
        },
        handleAvatarSuccess(res, file) {
            this.$set(this.form, 'avatar', res.data[0].fileurl)
        },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    setServiceTake(this.form).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.formLoading = false;
                        this.$emit('load')
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),
    },
}

</script>
<style scoped lang='scss'>
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px !important;
    height: 100px !important;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
    /* text-align: center;
    display: block !important; */
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>